<template>
  <div class="container_report">
    <!-- 头部 -->
    <div class="header_report">
      <!-- 左边 -->
      <div class="header_left">
        <span class="left_text">课堂AI分析面板</span>

        <el-select
          v-model="classValue"
          clearable
          placeholder="年级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          class="header_select"
          v-model="classValue"
          clearable
          placeholder="班级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          v-model="classValue"
          clearable
          placeholder="学科"
          style="width: 240px"
        >
          <el-option
            v-for="item in classOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          class="header_select"
          v-model="classValue"
          clearable
          placeholder="上课时间"
          style="width: 240px"
        >
          <el-option
            v-for="item in classOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <!-- 右边 -->
      <div class="header_right">
        <el-button type="primary">课程对比</el-button>
        <el-button type="primary">预览报告</el-button>

        <span class="right_text">2024-1-11 16:54:55</span>
      </div>
    </div>

    <!-- 内容 -->
    <div class="main_report">
      <!-- 单课程 -->
      <div class="single">
        <!-- 上 -->
        <div class="single_top">
          <!-- 左边 -->
          <div class="top_left">
            <div class="single_video_header">
              <div class="header_title">
                <span class="class_text">语文</span>
                <span>三年级（5）班 <span>教师：</span>刘德华</span>
              </div>

              <div class="box_container">
                <div class="header_box">
                  <span class="box_sum">45</span>
                  <span>出席人数</span>
                </div>

                <div class="header_box box_mid">
                  <span class="box_sum">45</span>
                  <span>迟到人数</span>
                </div>

                <div class="header_box">
                  <span class="box_sum">45</span>
                  <span>出席人数</span>
                </div>
              </div>
            </div>

            <video src=""></video>
          </div>

          <!-- 右边 -->
          <div class="top_right">
            <!-- 上 -->
            <div class="right_header">
              <div class="score">
                <img
                  class="score"
                  src="../../../../static/_/raty/img/emoji_spritesheet_0.png"
                  alt=""
                />
              </div>

              <div class="ai_text">
                <span class="text_bold">AI课程建议：</span>
                <span class="sug_text">
                  该堂课程从教学设计、课堂实施到学生参与度，均展现出了高水平的教学质量和有效的教学效果。
                  1、教师围绕教材内容，设计了一系列生动有趣且富有层次性的教学活动。通过情境创设、互动问答、小组合作等多种形式，引导学生深入理解和掌握课文知识点，
                </span>
                <span class="text_bold">教学反思总结：</span>
                <div class="summarize">
                  该堂课程从教学设计、课堂实施到学生参与度，均展现出了高水平的教学质量和有效的教学效果。
                  1、教师围绕教材内容，设计了一系列生动有趣且富有层次性的教学活动。通过情境创设、互动问答、小组合作等多种形式，引导学生深入理解和掌握课文知识点，
                </div>
              </div>
            </div>

            <hr />

            <!-- 下 -->
            <div>
              <div ref="testRef" class="test_ref"></div>

              <div style="display: flex;">
                <div ref="stRef" style="width: 400px; height: 400px;"></div>

                <div ref="rtRef" style="width: 400px; height: 400px;"></div>
              </div>

              <div style="display: flex;">
                <div ref="techerRef" style="width: 400px; height: 400px;"></div>

                <div ref="scoreRef" style="width: 400px; height: 400px;"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 下 -->
        <div class="single_bottom"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
const emotionData = [];
const option = {
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "value",
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent"
        }
      }
    },

    // 适配折线图x轴
    {
      type: "category",
      name: "lineX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      boundaryGap: false, // 从起始点开始描点 不从中间开始描点
      data: [
        "教室巡视",
        "教室巡视",
        "师生互动",
        "书写板书",
        "指导学生",
        "教师讲授"
      ]
    },

    // 适配散点图x轴
    {
      type: "value",
      name: "scatterX",
      position: "top",
      axisLine: {
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },
      splitLine: {
        // 隐藏图表内刻度线
        show: false
      }
    }
  ],

  yAxis: [
    {
      type: "category",
      data: [
        "教室巡视",
        "教室巡视",
        "师生互动",
        "书写板书",
        "指导学生",
        "教师讲授"
      ],
      axisTick: {
        // 轴上的刻度格
        show: false
      },

      axisLine: {
        show: false,
        lineStyle: {
          color: "#979797"
        }
      }
    },

    {
      type: "value",
      name: "Evaporation",
      position: "top",
      max: 350, // value的最大值
      axisLine: {
        // 坐标轴线
        show: true,
        lineStyle: {
          color: "transparent"
        }
      },

      splitLine: {
        show: false
      }
    }
  ],

  series: [
    // 折线图
    {
      name: "Direct",
      type: "line",

      emphasis: {
        focus: "series"
      },
      smooth: true,
      data: [50, 50, 30, 50, 30, 50],
      itemStyle: {
        color: "#07a5b8"
      },
      lineStyle: {
        width: 3 // 设置折线宽度为 4
      },
      areaStyle: {
        color: "#0e6184"
      },
      symbol: function(data, itemOptions, seriesType, seriesName) {
        emotionData.push(data);
        return "none";
      },

      xAxisIndex: 1, // 使用第二个 x 轴
      yAxisIndex: 1 // 使用第二个 x 轴
    },

    // 散点情绪图
    {
      symbolSize: 20,
      data: [
        [0.2, 30],
        [1, 30],
        [2, 30],
        [3, 30],
        [4, 30],
        [4.8, 30]
      ],

      symbol: function(data, itemOptions, seriesType, seriesName) {
        // 自定义符号样式
        if (emotionData[itemOptions.dataIndex] === 50) {
          return "path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z";
        } else {
          return "path://M32 2c0-1.422-0.298-2.775-0.833-4-1.049 2.401-3.014 4.31-5.453 5.287-2.694-2.061-6.061-3.287-9.714-3.287s-7.021 1.226-9.714 3.287c-2.439-0.976-4.404-2.886-5.453-5.287-0.535 1.225-0.833 2.578-0.833 4 0 2.299 0.777 4.417 2.081 6.106-1.324 2.329-2.081 5.023-2.081 7.894 0 8.837 7.163 16 16 16s16-7.163 16-16c0-2.871-0.757-5.565-2.081-7.894 1.304-1.689 2.081-3.806 2.081-6.106zM18.003 11.891c0.064-1.483 1.413-2.467 2.55-3.036 1.086-0.543 2.16-0.814 2.205-0.826 0.536-0.134 1.079 0.192 1.213 0.728s-0.192 1.079-0.728 1.213c-0.551 0.139-1.204 0.379-1.779 0.667 0.333 0.357 0.537 0.836 0.537 1.363 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.037 0.001-0.073 0.003-0.109zM8.030 8.758c0.134-0.536 0.677-0.862 1.213-0.728 0.045 0.011 1.119 0.283 2.205 0.826 1.137 0.569 2.486 1.553 2.55 3.036 0.002 0.036 0.003 0.072 0.003 0.109 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.527 0.204-1.005 0.537-1.363-0.575-0.288-1.228-0.528-1.779-0.667-0.536-0.134-0.861-0.677-0.728-1.213zM16 26c-3.641 0-6.827-1.946-8.576-4.855l2.573-1.544c1.224 2.036 3.454 3.398 6.003 3.398s4.779-1.362 6.003-3.398l2.573 1.544c-1.749 2.908-4.935 4.855-8.576 4.855z"; // 奇数索引使用矩形
        }
      },

      xAxisIndex: 2, // 使用第二个 x 轴
      yAxisIndex: 1, // 使用第二个 x 轴
      type: "scatter"
    },

    // 第一柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      showBackground: true,
      data: ["-", 320, "-", "-", "-", "-"],
      itemStyle: {
        color: "#cbe21a"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 120, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 220, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 150, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", 230, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#cbe21a"
      },
      data: ["-", 820, "-", "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    // 第二柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      data: ["-", "-", 320, "-", "-", "-"],
      itemStyle: {
        color: "#15c136"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 300, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 180, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 290, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 230, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 500, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", 170, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#15c136"
      },
      data: ["-", "-", 540, "-", "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第三柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 150, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", 100, "-", "-"],
      itemStyle: {
        color: "#6849ff"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 400, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 450, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 160, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 360, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 440, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 60, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", 500, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#6849ff"
      },
      data: ["-", "-", "-", 420, "-", "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第四柱状图
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", 200, "-"],
      itemStyle: {
        color: "#16c9ba"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 115, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 623, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 440, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 180, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 500, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 340, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", 680, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#16c9ba"
      },
      data: ["-", "-", "-", "-", 366, "-"],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    //  第五柱状图
    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },
    {
      name: "Direct",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },

      data: ["-", "-", "-", "-", "-", 122],
      itemStyle: {
        color: "#1978e5"
      },
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 245],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Mail Ad",
      colorBy: "series",

      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 360],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 512],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Affiliate Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 604],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 322],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Video Ad",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 425],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Placeholder",
      type: "bar",
      stack: "total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent"
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent"
        }
      },
      data: ["-", "-", "-", "-", "-", 150],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    },

    {
      name: "Search Engine",
      type: "bar",
      stack: "total",

      emphasis: {
        focus: "series"
      },
      itemStyle: {
        color: "#1978e5"
      },
      data: ["-", "-", "-", "-", "-", 346],
      xAxisIndex: 0, // 使用第二个 x 轴
      yAxisIndex: 0 // 使用第二个 y 轴
    }
  ]
};
const x_value = [];
const show_data = [
  2,
  6,
  25,
  35,
  36,
  36,
  37,
  39,
  40,
  63,
  63,
  63,
  63,
  66,
  73,
  74
];
const _max = show_data[show_data.length - 1];
for (var i = 0; i < _max; i++) {
  x_value.push(i);
}

// S-T图的options
const stOption = {
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    name: "T",
    nameLocation: "end",
    type: "category",
    boundaryGap: false,
    splitNumber: 5,
    max: _max,
    min: 0,
    data: x_value,
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#3C5F95"
      }
    },
    axisTick: {
      show: false,
      alignWithLabel: true
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    }
  },
  yAxis: {
    name: "S",
    nameLocation: "end",
    max: _max,
    splitNumber: 5,
    min: 0,
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#3C5F95"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: "transparent"
      }
    }
  },
  series: [
    {
      name: "S-T曲线",
      type: "line",
      step: "end",
      lineStyle: {
        color: "#3DE2FF"
      },
      itemStyle: {
        color: "rgb(33,148,246)",
        borderWidth: 1,
        borderColor: "#3DE2FF"
      },
      data: [2, 6, 25, 35, 36, 36, 37, 39, 40, 63, 63, 63, 63, 66, 73, 74]
    }
  ]
};

// CH-RT图的options
const rtOption = {
  tooltip: {
    trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
    axisPointer: {
      type: "effectScatter" //这里只有hover在辐射点之上才触发
    },
    formatter: function(param) {
      //显示框自定义
      return (
        '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
        "<span>" +
        param.data[1].toFixed(2) +
        "</span>" +
        "</p>" +
        '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
        "<span>" +
        param.data[0].toFixed(2) +
        "</span>" +
        "</p>"
      );
    }
  },
  xAxis: {
    name: "RT",
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    //隐藏方格线
    splitLine: {
      show: false
    }
  },
  yAxis: {
    name: "CH",
    axisLine: {
      lineStyle: {
        color: "#ccc",
        width: 1
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    // 提示点
    {
      type: "effectScatter",
      symbolSize: 8,
      data: [[0.92, 0.05]],
      color: "#08fcff"
    },
    //线
    {
      data: [
        [0, 0],
        [0.5, 1],
        [1, 0]
      ],
      type: "line",
      symbol: "none", // 去掉线的拐点
      color: "#979797"
    },
    {
      data: [
        [0.2, 0.4],
        [0.8, 0.4]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    {
      data: [
        [0.3, 0],
        [0.3, 0.6]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    {
      data: [
        [0.7, 0],
        [0.7, 0.6]
      ],
      type: "line",
      symbol: "none",
      color: "#979797"
    },
    // 标注文字
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.44, 0.6]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["对话型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.13, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["练习型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.44, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["混合型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    },
    {
      type: "scatter",
      symbolSize: 1,
      symbol: "roundRect",
      data: [[0.74, 0.2]],
      label: {
        normal: {
          position: "middle",
          distance: 0,
          show: true,
          formatter: ["讲授型"].join("\n"),
          backgroundColor: "transparent",
          fontSize: 14,
          color: "#fff"
        }
      }
    }
  ]
};

// 教师轨迹散点图
const techerOption = {
  xAxis: {
    splitLine: {
      // 隐藏图表内刻度线
      show: false
    },
    axisLine: {
      // 坐标轴线
      show: true,
      lineStyle: {
        color: "transparent"
      }
    }
  },
  yAxis: {
    splitLine: {
      // 隐藏图表内刻度线
      show: false
    },
    axisLine: {
      // 坐标轴线
      show: true,
      lineStyle: {
        color: "transparent"
      }
    }
  },
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: "scatter"
    }
  ]
};

// 得分图表

const scoreOption = {
  series: [
    {
      type: "pie",
      radius: ["50%", "70%"],
      color: ["#07b1d5", "#1f4378"],
      label: {
        position: "center",
        formatter: "课堂得分"
      },
      emphasis: {
        scale: false
      },
      data: [{ value: 0.6 }, { value: 1 - 0.6 }]
    }
  ]
};

const classOpt = [
  {
    value: 1,
    label: "一年级"
  },
  {
    value: 2,
    label: "二年级"
  },
  {
    value: 3,
    label: "三年级"
  },
  {
    value: 4,
    label: "四年级"
  }
];
export default {
  data() {
    return {
      classValue: "",
      classOpt,
      option,
      stOption,
      rtOption,
      techerOption,
      scoreOption,
      emotionData
    };
  },

  methods: {
    init() {
      // 行为分析
      const dom = this.$refs.testRef;
      const myChart = echarts.init(dom);
      myChart.setOption(this.option);

      // st图
      const stDom = this.$refs.stRef;
      const stChart = echarts.init(stDom);
      stChart.setOption(this.stOption);

      // ch图
      const rtDom = this.$refs.rtRef;
      const rtChart = echarts.init(rtDom);
      rtChart.setOption(this.rtOption);

      // 教师轨迹图
      const teDom = this.$refs.techerRef;
      const teChart = echarts.init(teDom);
      teChart.setOption(this.techerOption);

      //得分图
      const scoreDom = this.$refs.scoreRef;
      const scoreChart = echarts.init(scoreDom);
      scoreChart.setOption(this.scoreOption);
    }
  },

  mounted() {
    this.init();
  }
};
</script>
<style lang="scss">
.container_report {
  .header_report {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    background-color: #011f39;

    .header_left {
      display: flex;
      align-items: center;

      .left_text {
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        margin-right: 10px;
      }

      .header_select {
        margin: 0 10px;
      }
    }

    .header_right {
      display: flex;
      align-items: center;

      .right_text {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-left: 10px;
      }
    }
  }

  .main_report {
    background-color: #011f39;
    height: 100%;
    padding: 15px 25px;

    .single {
      .single_top {
        display: flex;

        .top_left {
          width: 50%;
          video {
            width: 100%;
            height: 350px;
            // background-color: #f2f2f2;
            margin-top: 10px;
          }
          .single_video_header {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            padding: 10px;
            justify-content: space-between;
            // background-color: #f2f2f2;
            color: #979797;

            .header_title {
              display: flex;
              flex-direction: column;
              font-weight: bold;
              font-size: 18px;

              .class_text {
                margin-bottom: 10px;
              }
            }

            .box_container {
              display: flex;

              .header_box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;

                .box_sum {
                  font-weight: bold;
                  font-size: 18px;
                }
              }

              .box_mid {
                margin: 0 10px;
              }
            }
          }
        }

        .top_right {
          width: 50%;
          box-sizing: border-box;
          margin-left: 10px;
          // background-color: #f2f2f2;
          padding: 5px 20px 0 15px;

          .right_header {
            display: flex;
            .score {
              width: 170px;
              height: 170px;
            }

            .ai_text {
              color: #979797;
              display: flex;
              flex-direction: column;
              margin-left: 10px;

              .text_bold {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 5px;
              }

              .sug_text {
                font-size: 14px;
              }

              .summarize {
                height: 50px;
                padding: 3px;
                border-radius: 5px;
                width: 100%;
                border: 1px solid #6666665e;
                overflow: hidden;
                overflow-y: scroll;
              }
            }
          }

          .test_ref {
            width: 800px;
            height: 600px;
          }
        }
      }

      .single_bottom {
        display: flex;
      }
    }
  }
}
</style>
